app-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow-x: hidden;
}

mat-nav-list {
  min-width: 200px;
  width: 20%;
  border-right: 1px solid grey;
  overflow: auto;
}

mat-nav-list .active {
  background: #afddff;
}

router-outlet + * {
  width: 100%;
  overflow: auto;
}

gridster-item div.button-holder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.options {
  padding: 10px;
  display: grid;
}

.options-header {
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.source-code-button {
  justify-self: end;
}

[draggable] {
  user-select: none;
  cursor: pointer;
}

app-parent-dynamic, app-widget-a, app-widget-b, app-widget-c {
  display: flex;
  height: 100%;
  width: 100%;
  color: white;
  font-weight: bold;
  font-size: 24px;
  align-items: center;
  justify-content: center;
}

code {
  background: lightgrey;
}

app-widget-a {
  background: red;
}

app-widget-b {
  background: blue;
}

app-widget-c {
  background: lawngreen;
}
